<script setup lang='ts'>
import {reactive,ref,onBeforeMount} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {user as useUser} from "@/store"
import {LockOutlined,UserOutlined,KeyOutlined} from "@ant-design/icons-vue"
import type{loginFormInfoType} from "./type"
import { message } from 'ant-design-vue'
import  md5  from "blueimp-md5"
import {PRIVATE_KEY} from "@/common/config"
import type{FormInstance} from 'ant-design-vue'
import {verifyPic as _verifyPic} from "@/assets/imgs/verifyPic"

const router=useRouter()
const route=useRoute()

const userStore=useUser()

const formState:loginFormInfoType = reactive({
      userName:'',
      password: '',
      verifyCode:'tky8',
      remember: true,
});


const isLoading=ref(false)

const formRef=ref<FormInstance>()

const verifyPic=ref<string>('')
const verifyCodeKey=ref<string>('')
const verifyCode=ref<string>('')

const rules={
  userName:[{ required: true, message: '请输入你的用户名!'}],
  password:[{ required: true, message: '请输入你的密码!'}],
  verifyCode:[{ required: true, message: '请输入你的验证码!'}],
}

onBeforeMount(()=>{
    console.log("超级管理员账号：admin，密码：admin")
    bindToggleVerifyPic()
    verifyPic.value=_verifyPic             
    const {remember,userName,password}=userStore.loginInfo
    if(remember && userName && password) 
    {
      formState.userName=userName
      formState.password=password
      formState.remember=remember
    }
    if(typeof remember=='boolean')
    formState.remember=remember
})

const resetF=()=>{
  console.log({...formRef.value})
  formRef.value?.resetFields()
}

function bindToggleVerifyPic(){
	console.log('发送请求切换验证码')
}

const success=async(values:loginFormInfoType)=>{
  
  if(isLoading.value) return
   //console.log(values) 
   isLoading.value=true
   const res=await userStore.loginByAccount({userName:values.userName,password:md5(values.password,PRIVATE_KEY)})
   isLoading.value=false
   
   if(res&&res.code==200)
   {
    const {id}=userStore.loginInfo
    if(route.query.redirect && res.id===id)   // 防止重定向到没有权限的页面
    router.push(decodeURIComponent(route.query.redirect as string))
    else
    router.push('/')
    if(values.remember) {
      
      userStore.$patch(s=>{
        const {loginInfo:{phone}}=s
        const obj:loginFormInfoType={phone,id:res.id,activeTab:'account',...values}
        delete obj.verifyCode
        s.loginInfo=obj
      })
    }else{
      userStore.$patch(s=>{
        const {loginInfo:{phone}}=s
        s.loginInfo={password:'',userName:'',remember:false,phone,id:res.id,activeTab:'account'}
      })
    }
   }
   if(res&&res.code==201) message.warn('用户名或者密码错误！')
}

const fail=(err:any)=>{
   console.log('err',err)
}


</script>

<template>
 <a-form
    class="account-form"
    ref="formRef"
    :rules="rules"
    :model="formState"
    @finish="success"
    @finishFailed="fail"
  >
    
    <a-form-item
      name="userName"
      
    >
      <a-input v-model:value="formState.userName"   placeholder="请输入用户名" allowClear>
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      name="password"
    >
      <a-input-password v-model:value="formState.password" placeholder="请输入密码" allowClear>
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    
    <a-form-item name="verifyCode" 
   >
				<a-input v-model:value="formState.verifyCode" placeholder="请输入验证码" 
				style="width: 60%;margin-right: 10px;" allowClear
				>
        <template #prefix>
          <KeyOutlined class="site-form-item-icon" />
        </template>
        </a-input>
				<img style="width:35%;height: 32px;" :src="verifyPic" @click="bindToggleVerifyPic"  />
		  </a-form-item>

   <a-form-item name="remember" no-style>
        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
        <a class="account-form-forget" href="">忘记密码</a>
  </a-form-item>
   
  <a-form-item>
    <a-button  type="primary" html-type="submit" class="account-form-button" style="margin-top: 10px;" :loading="isLoading">
      登录
    </a-button>
   </a-form-item>

      </a-form>
</template>

<style lang="less" scoped>
.account-form {
  .account-form-forget {
    float: right;
  }
  .account-form-button {
  width: 100%;
}
}
</style>